<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../Ajs/vue.js"></script>
    <script src="../Ajs/vue.min.js"></script>
</head>
<body>

<div id="box">
    <from>
        <div>
            姓名：<input type="text" v-model="uname">
        </div>
        <div>
            性别：
            男 <input type="radio" value="1" v-model="gender">
            女 <input type="radio" value="2" v-model="gender">
        </div>
        <div>
            爱好：
            篮球 <input type="checkbox" value="篮球" v-model="like">
            看书 <input type="checkbox" value="看书" v-model="like">
            轮滑 <input type="checkbox" value="轮滑" v-model="like">
        </div>
        <div>
            职业：
            <select v-model="selectDan">
                <option value="">---选择---</option>
                <option value="IT">IT</option>
                <option value="教师">教师</option>
                <option value="消防">消防</option>
            </select>
        </div>
        <div>
            性格：
            <select v-model="selectDuo" multiple="true">
                <option value="">---选择---</option>
                <option value="活泼">活泼</option>
                <option value="开放">开朗</option>
                <option value="内向">内向</option>
            </select>
        </div>
        <div>
            备注：
            <textarea v-model="textarea"></textarea>
        </div>
        <div>
            <input type="submit" value="提交" @click.prevent="submit">
        </div>

        <!--------------------------------------------------------------------------------------->
        <hr>

        <div>
            <input type="text" v-model="num"><button @click="fn">确认</button> <br>
            <input type="text" v-model.number="num1"><button @click="fn1">确认</button> <br>
            <input type="text" v-model.trim="num2"><button @click="fn2">确认</button><br>
            <input type="text" v-model.lazy="num3"><button @click="fn3">确认</button>  {{num3}}<br>
        </div>

    </from>
</div>


<script>
    var vm = new Vue({
        el:"#box",
        data:{
            uname:"",
            gender:1,
            like:[],
            selectDan:"",
            selectDuo:[],
            textarea:"",

            num:"",
            num1:"",
            num2:"",
            num3:""
        },
        methods:{
            submit(){
                console.log("uname:"+this.uname);
                console.log("gender:"+this.gender);
                console.log('like'+this.like);
                console.log('selectDan'+this.selectDan);
                console.log('selectDuo'+this.selectDuo);
                console.log('textarea'+this.textarea);
            },

            /*************************************************************/
            fn(){
                console.log(this.num)
            },
            fn1(){
                val = this.num1+13;
                console.log(val);
            },
            fn2(){
                console.log(this.num2);
            },
            fn3(){
                console.log(this.num3);
            }
        }
    });

    // 一、表单操作

    // 二、表单域修饰符
    /*
        v-model.number   转化为数值
        v-model.trim   去掉开始和结尾的空格
        v-model.lazy   将input事件切换为change事件(失去焦点时触发)
    * */




</script>

</body>
</html>
